<template>
  <div class="app-container">
  <div class="filter-container">
        <el-button type="primary"  @click="saleClick()" style="margin-left:0px;">直销</el-button>
        <el-input clearable v-model="search.number" placeholder="出库单号" style="width: 170px;margin-left:10px;"></el-input>
        <el-input clearable v-model="search.number" placeholder="车牌号/客户姓名/精品名称" style="width: 270px;margin-left:10px;"></el-input>
        
        <el-date-picker v-model="search.daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="margin-left:10px;">
        </el-date-picker>

        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
     <el-table-column  min-width="100" align="center" label="出库单号">
        <template slot-scope="scope">
          <span>{{ scope.row.ordernumber }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="类型">
        <template slot-scope="scope">
          <span>{{ scope.row.customername }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="车牌号">
        <template slot-scope="scope">
          <span>{{ scope.row.customername }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="客户姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.customername }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="具体车型">
        <template slot-scope="scope">
          <span>{{ scope.row.customername }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="制单人">
        <template slot-scope="scope">
          <span>{{ scope.row.customername }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="出库状态">
        <template slot-scope="scope">
          <span>{{ scope.row.customername }}</span>
        </template>
      </el-table-column>
      
      <el-table-column  min-width="100" align="center" label="日期">
        <template slot-scope="scope">
          <span>{{ scope.row.createtime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  width="220" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="tableRowClick().settlement(scope.row.id)">出库</el-button>
          <el-button type="primary" size="small" @click="tableRowClick().details(scope.row.id)">出库单查询</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="fetchData" />

<!-- 直销 -->
<el-dialog :title="dialogSale.title" :visible.sync="dialogSale.visible"  width="900px">
    <div class="ci" v-show="dialogSale.step==1">
        <div class="item">
            <span class="name">销售对象：</span>
            <span class="value">
                <el-button type="primary" @click="dialogSaleClick().selectSaleType(1)">客户</el-button>
                <el-button type="primary" @click="dialogSaleClick().selectSaleType(2)">合作采购方</el-button>
            </span>
        </div>
    </div>
    <div class="ci" v-show="dialogSale.step==2">
       <div class="item">
          <el-input  v-model="dialogSale.search.key" placeholder="车牌号码/车主/手机号码" style="width:420px; margin-left: 10px;" ></el-input>
          <el-button type="primary" @click="dialogSaleClick().search()"  style=" margin-left: 10px;">查询</el-button>
          <el-button type="success" @click="dialogSaleClick().add()"  v-show="dialogSale.list!=null && dialogSale.list.length==0" style=" margin-left: 10px;">新增</el-button>
      </div>
      <div class="item hauto" v-show="dialogSale.list!=null"  style="flex-direction:column;">
          <el-table v-loading="dialogSale.listLoading" :data="dialogSale.list" 
                border fit highlight-current-row stripe 
                style="width: 100%">
                <el-table-column align="center" label="序" width="80">
                    <template slot-scope="scope">
                    <span>{{ scope.row._id }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="车牌号码">
                    <template slot-scope="scope">
                    <span>{{ scope.row.licenseplate }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="具体车型">
                    <template slot-scope="scope">
                    <span>{{ scope.row.carname }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="车身颜色">
                    <template slot-scope="scope">
                    <span>{{ scope.row.carcolor }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="本店购买">
                    <template slot-scope="scope">
                    <span>{{ scope.row.buyinshop }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="联系人">
                    <template slot-scope="scope">
                    <span>{{ scope.row.customername }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="电话">
                    <template slot-scope="scope">
                    <span>{{ scope.row.customerphone }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作"  width="120" fixed="right">
                    <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="dialogSaleClick().tableRowSelect(scope.row.id)">选择</el-button>
                    </template>
                </el-table-column>
          </el-table>
      </div>
    </div>
    <div class="ci" v-show="dialogSale.step==3">
      <div class="item">
          <span class="name">领料人：</span>
          <span class="value">
              <el-input  v-model="dialogOutstore.data.getparson" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>
        <div class="item">
          <span class="name">本次出库量：</span>
          <span class="value">
              <el-input  v-model="dialogOutstore.data.count" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSale.visible = false">取 消</el-button>
        <el-button type="primary" v-show="dialogSale.step==3" @click="dialogSaleClick().save()" :loading="dialogSale.saveloading">出 库</el-button>
    </div>
</el-dialog>
<!-- end  直销 -->

<!-- 出库 -->
<el-dialog :title="dialogOutstore.title" :visible.sync="dialogOutstore.visible"  width="700px">
    <div class="ci">
      <div class="item">
          <span class="name">出库单号：</span>
          <span class="value">
              {{dialogOutstore.data.number}}
          </span>
      </div>
      <div class="item">
          <span class="name">精品名称：</span>
          <span class="value">
              {{dialogOutstore.data.number}}
          </span>
      </div>
      <div class="item">
          <span class="name">编码：</span>
          <span class="value">
              {{dialogOutstore.data.number}}
          </span>
      </div>
      <div class="item">
          <span class="name">当前库存：</span>
          <span class="value">
              {{dialogOutstore.data.number}}
          </span>
      </div>
      <div class="item">
          <span class="name">所学数量：</span>
          <span class="value">
              {{dialogOutstore.data.number}}
          </span>
      </div>
      <div class="item">
          <span class="name">已出库数量：</span>
          <span class="value">
              {{dialogOutstore.data.number}}
          </span>
      </div>
      <div class="item">
          <span class="name">未出库数量：</span>
          <span class="value">
              {{dialogOutstore.data.number}}
          </span>
      </div>
       <div class="item">
          <span class="name">领料人：</span>
          <span class="value">
              <el-input  v-model="dialogOutstore.data.getparson" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>
        <div class="item">
          <span class="name">本次出库量：</span>
          <span class="value">
              <el-input  v-model="dialogOutstore.data.count" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>
      
      
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogOutstore.visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogOutstoreClick().save()" :loading="dialogOutstore.saveloading">结 算</el-button>
    </div>
</el-dialog>
<!-- end  出库 -->

<!-- 出库单详细 -->
<el-dialog :title="dialogDetails.title" :visible.sync="dialogDetails.visible"  width="700px">
    <div class="ci" ref="printNav">
      <div class="item">
          <span class="name">出库明细单号：</span>
          <span class="value">
              {{dialogOutstore.data.number}}
          </span>
          <span class="name">时间：</span>
          <span class="value">
              {{dialogOutstore.data.createtime}}
          </span>
      </div>
      <div class="item">
          <span class="name">操作人：</span>
          <span class="value">
              {{dialogOutstore.data.number}}
          </span>
          <span class="name">领料人：</span>
          <span class="value">
              {{dialogOutstore.data.number}}
          </span>
      </div>
      <div class="item">
          <span class="name">精品名称：</span>
          <span class="value">
              {{dialogOutstore.data.number}}
          </span>
          <span class="name">编码：</span>
          <span class="value">
              {{dialogOutstore.data.number}}
          </span>
      </div>

      <div class="item">
          <span class="name">出库数量：</span>
          <span class="value">
              {{dialogOutstore.data.number}}
          </span>
          <span class="name">所需数量：</span>
          <span class="value">
              {{dialogOutstore.data.number}}
          </span>
      </div>
      
      
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDetails.visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogDetailsClick().print()" :loading="dialogDetails.saveloading">打 印</el-button>
    </div>
</el-dialog>
<!-- end  出库单详细 -->


  </div>
</template>

<script>
import * as keepfitappointApi from '@/api/aftersale/keepfitappoint'
import * as carPurchaseApi from '@/api/cars/purchase'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import * as enumHelper from '@/utils/enum'
import {objectMerge,objectEmpty} from '@/utils/index'
import Print from '@/utils/print'

export default {
    components: { Pagination },
    data(){
        return{
            btnState:true,
          search:{ 
              number:'',
              customer:'',
              phone:'',
              daterange:'',
          },
          listQuery: {
                page: 1,
                rows: 20,
                name:'',
                phone:'',
                state:-1,
                daterange:''
          },
          list:null,
          listLoading:false,
          total:0,
          selectOptions:{
            carinfo:[],
          },
            dialogSale:{
              visible:false,
              saveloading:false,
              title:'直销',
              step:1,
              list:null,
              listLoading:false,
              data:{
                  saletype:0,
                  
              },
              search:{
                  key:''
              }
          },
          dialogOutstore:{
              visible:false,
              saveloading:false,
              title:'出库',
              data:{
                  ids:'',
                  storename:'',
                  storeplace:'',
              }
          },
            dialogDetails:{
              visible:false,
              saveloading:false,
              title:'出库单详情',
              data:{
                  ids:'',
                  storename:'',
                  storeplace:'',
              }
          },
        }
    },
    created(){
        var that=this;
        //初始化下拉菜单
        //enumHelper.initOptions(that.selectOptions.purchasetype,enumHelper.cars.purchaseType);
        //enumHelper.initOptions(that.selectOptions.paystage,enumHelper.cars.payStage);
        that.fetchData();
    },
    filters:{

      parseState(val){
        return enumHelper.cars.distributeState.getName(val);
      }

    },
    methods:{
        fetchData(){
          var that=this;
            carPurchaseApi.getDistributeAfterList({}).then(res=>{
              if(res.data){
                that.list=[...res.data.items.map((item,index)=>{
                  item._id=index+1;
                  return item;
                })];
              }
            })
        },
        saleClick(){
            var that=this;
            that.dialogSale.step=1;
            that.dialogSaleClick().init();
            that.dialogSale.visible=true;
        },
        tableSelectChange(arr){
            var that=this;
            that.btnState=arr.length==0;
            that.dialogOutstore.data.ids=arr.map(o=>o.id);
        },
        tableRowClick(){
          var that=this;
          return {
            settlement(id){
                var data=that.list.filter(o=>id==id)[0];
                that.dialogOutstore.data.ids=[id];
                that.dialogOutstore.visible=true;
            },
            details(id){
                var data=that.list.filter(o=>id==id)[0];
                that.dialogDetailsClick().init(data);
                that.dialogDetails.visible=true; 
            }
          }
        },
        dialogSaleClick(){
            var that=this;
            var dg=that.dialogSale;
            return {
                init(){
                    objectEmpty(dg.data);
                },
                selectSaleType(type){
                    dg.data.saletype=type;
                    dg.step=type+1;
                },
                search(){
                    var that=this;
                    dg.listLoading=true;
                    var c=parseInt(Math.random()*4);
                    keepfitappointApi.getCarList({limit:c,page:1}).then(res=>{
                        if(res.data){
                            dg.list=res.data.items.map((item,index)=>{
                                item._id=index+1;
                                return item;
                            })
                        }
                        dg.listLoading=false;
                    })
                },
                add(){
                    that.$router.push({path:'/aftersalemanage/allocate/addcar'})
                },
                tableRowSelect(id){
                    dg.step=3;
                }
            }
        },
        dialogOutstoreClick(){
          var that=this;
          var dg=that.dialogOutstore;
          return{
            init(data){
              data?objectMerge(dg.data,data):objectEmpty(dg.data);
            },
            save(){
              dg.visible=false;
            }
          }
        },
        dialogDetailsClick(){
          var that=this;
          var dg=that.dialogOutstore;
          return{
            init(data){
              data?objectMerge(dg.data,data):objectEmpty(dg.data);
            },
            print(){
              new Print(that.$refs['printNav']).Start();
            }
          }
        },
        
    }
}
</script>

<style scoped>

</style>